<template>
  <el-aside>
    <div
      :class="{ mask: !$store.state.isCollapse }"
      :style="$store.getters['getLayoutStyle']"
      @click="$store.commit('setCollapse', true)"
    />
    <el-menu
      class="el-menu-vertical"
      :style="$store.getters['getLayoutStyle']"
      :collapse="$store.state.isCollapse"
      router
      :default-active="$route.path"
      @select="select"
    >
      <el-menu-item index="/"> 主界面 </el-menu-item>
      <el-menu-item index="/functions-library"> 函数库与函数 </el-menu-item>
      <!-- <el-menu-item v-if="$store.getters['user/getUid'] == 23" index="/examine"> 审核 </el-menu-item> -->
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    select(e) {
      this.$store.commit('setCollapse', true);
    }
  }
};
</script>

<style lang="scss">
.mask {
  background-color: rgb(0, 0, 0);
  height: 100vh;
  opacity: 0.3;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 100;
}
.el-menu-vertical {
  position: absolute;
  left: 0;
  height: 100vh;
  z-index: 1000;
  background: #F5F5F5;
  overflow: hidden;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 150px;
}
.el-menu--collapse {
  width: 0;
}
.el-menu-item {
  text-align: left;
}
</style>
